<template>
  <div class="node-manage">
    <div class="search">
      <div class="fl">
        <span v-if="!isSystem" v-show="showAdd" class="icon-text" @click.stop="exportMethod('add')"
          ><i class="el-icon-plus"></i>添加</span
        >
        <span v-if="isHotCode" class="icon-text" @click.stop="exportMethod('hotCode')"
          ><i class="iconfont icon-reciguanli"></i>热词管理</span
        >
        <span v-if="!isSystem" class="icon-text" @click.stop="exportMethod('refresh')"
          ><i class="iconfont icon-shuaxin"></i>刷新</span
        >
        <span
          class="icon-text"
          :class="disabledReload ? 'disabled-text' : ''"
          @click.stop="exportMethod('active')"
          v-show="showTools"
          ><i class="icon iconfont icon-fasongchenggong" :class="disabledReload ? 'disabled-icon' : ''"></i>生效</span
        >
        <span class="icon-text" @click.stop="exportMethod('batchAdd')" v-if="showBatchAdd"
          ><i class="iconfont icon-piliangchuli"></i>批量添加</span
        >
        <el-input
          :style="{ width: width }"
          :placeholder="inputTitle || '请输入搜索条件'"
          size="mini"
          class="condition"
          v-model="searchContent"
          @keyup.enter.native="inputChange"
        >
          <i class="el-input__icon el-icon-search" slot="suffix" @click="inputChange"> </i>
        </el-input>
        <slot></slot>
        <el-button v-if="showAdvSearch" type="text" size="small" @click.stop="advSearchToggle">{{
          $t('public.advSearch')
        }}</el-button>
      </div>
      <template v-if="!isHiddenPage">
        <pagination
          class="page"
          :small="true"
          v-if="!isSystem"
          :currentPage="currentPage"
          :count="count || 0"
          :pageSize="pageSize"
          :totalPage="totalPage"
          @turnPage="turnPage"
        >
        </pagination>
      </template>
    </div>
    <advSchBadge v-if="!advSearchOpened" :badge="badges" @removeBadge="removeBadge"> </advSchBadge>
    <!--高级搜索 start =======================================================-->
    <div ref="advSearch" v-show="advSearchOpened" class="popover" v-if="showAdvSearch">
      <el-form :inline="true" label-position="top">
        <el-form-item :label="'PBX'" class="itemTitle">
          <el-select size="mini" v-model="PBX" disabled>
            <el-option :label="'全部'" :value="''"> </el-option>
            <el-option
              v-for="(item, index) in pbxs"
              :label="item.NickName + ' (' + item.PBX + ')'"
              :value="item.PBX"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务号类型" class="itemTitle">
          <el-select size="mini" v-model="serviceType">
            <el-option :label="'全部'" :value="''"> </el-option>
            <el-option v-for="(item, index) in serviceList" :label="item.label" :value="item.value" :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务号" class="itemTitle">
          <el-input v-model="serviceNo" :placeholder="'请输入搜索条件'"></el-input>
        </el-form-item>
        <el-form-item v-for="(item, index) in advSearch.items" :label="item.title" class="itemTitle" :key="index">
          <el-input
            v-if="item.type === 'input'"
            v-model="advSearch.form[item.valueName]"
            :placeholder="'请输入搜索条件'"
          ></el-input>
          <el-select size="mini" v-if="item.type === 'select'" v-model="advSearch.form[item.valueName]">
            <el-option v-for="(one, index) in item.data" :label="one.label" :value="one.value" :key="index">
            </el-option>
          </el-select>
          <el-checkbox-group v-if="item.type === 'checkbox'" v-model="advSearch.form[item.valueName]">
            <el-checkbox v-for="(one, index) in item.data" :label="one.label" :key="index"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="btnWrap">
        <el-button type="info" class="primary_btn report_excel_btn" @click="advResetBtn">重置</el-button>
        <el-button type="primary" class="primary_btn" @click="advSearchBtn">搜索</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/public-modules/card/Pagination'
import AdvSchBadge from '@/components/public-modules/card/search/AdvSchBadge'
import { trimObjEmptyValue } from '@utils/m7Utils.js'
export default {
  name: 'publicSearch',
  data() {
    return {
      searchContent: '',
      advSearchOpened: false,
      pbxs: [],
      serviceList: [
        { label: '普通', value: 'normal' },
        { label: '轻量级', value: 'lightweight' }
      ],
      serviceType: '',
      serviceNo: '',
      advSearch: {}
    }
  },
  props: {
    isHiddenPage: Boolean,
    isHotCode: Boolean, // 是否是热词
    isSystem: Boolean, // 是否为系统节点
    inputTitle: String,
    width: {
      type: String,
      default: ''
    },
    currentPage: Number,
    count: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    disabledReload: {
      // 生效按钮是否可点击
      type: Boolean,
      default: true
    },
    showTools: {
      type: Boolean,
      default: true
    },
    showAdd: {
      type: Boolean,
      default: true
    },
    showBatchAdd: {
      type: Boolean,
      default: false
    },
    showAdvSearch: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Pagination,
    AdvSchBadge
  },
  computed: {
    totalPage() {
      return Math.ceil(this.count / this.pageSize) || 1
    },
    badges() {
      let data = {}
      // data.PBX = this.PBX
      if (this.serviceType === 'normal') {
        data.serviceType = '普通'
      } else if (this.serviceType === 'lightweight') {
        data.serviceType = '轻量级'
      } else {
        data.serviceType = ''
      }
      data.serviceNo = this.serviceNo
      trimObjEmptyValue(data)
      return data
    },
    PBX() {
      return this.$store.state.config.callCenter.currentPBX
    }
  },
  methods: {
    exportMethod(val) {
      if (val === 'refresh') {
        this.searchContent = ''
      }
      if (val === 'active' && this.disabledReload) {
        return
      }
      this.$emit('exportMethod', val)
    },
    inputChange() {
      this.$emit('inputChange', this.searchContent)
    },
    turnPage(val) {
      this.$emit('turnPage', val)
    },
    batchAddClick() {
      // 批量添加
    },
    advSearchToggle() {
      this.advSearchOpened = !this.advSearchOpened
    },
    removeBadge() {
      this.$emit('removeBadge')
    },
    advResetBtn() {
      this.serviceType = ''
      this.serviceNo = ''
    },
    hide() {
      this.advSearchOpened = false
    },
    advSearchBtn() {
      this.searchContent = ''
      let searchCondition = {}
      searchCondition.PBX = this.PBX
      searchCondition.serviceType = this.serviceType
      searchCondition.serviceNo = this.serviceNo
      this.$emit('advSearch', searchCondition)
      this.hide()
    },
    advSearch1() {
      this.serviceType = ''
      this.serviceNo = ''
      this.searchContent = ''
      let searchCondition = {}
      searchCondition.PBX = this.PBX
      searchCondition.serviceType = this.serviceType
      searchCondition.serviceNo = this.serviceNo
      this.$emit('advSearch', searchCondition, true)
    },
    advSearch2() {
      this.serviceType = ''
      this.serviceNo = ''
      this.searchContent = ''
      let searchCondition = {}
      searchCondition.PBX = this.PBX
      searchCondition.serviceType = this.serviceType
      searchCondition.serviceNo = this.serviceNo
      this.$emit('advSearch', searchCondition)
    },
    clickFun(e) {
      if (!this.$el.contains(e.target)) {
        this.advSearchOpened = false
      }
    }
  },
  beforeMount() {},
  mounted() {
    document.addEventListener('click', this.clickFun)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.clickFun)
  }
}
</script>

<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
.node-manage
 position relative
.search
  height 30px
  padding 8px 10px
  .el-icon-plus,.icon-shuaxin,.icon-fasongchenggong,.icon-reciguanli
    color $c-main
    font-size 12px
    margin-right 2px
  .disabled-icon
    color #9D9B9D
  .condition
    width 270px
    margin-right 8px
  .page
    float right
  .icon-text
    margin-right 16px
    cursor pointer
    line-height 30px
  .disabled-text
    cursor not-allowed
.popover
  text-align center
  min-width 500px
  min-height 60px
  padding 10px
  padding-top 20px
  position absolute
  top 50px
  left 270px
  background #fff
  z-index 100
  border 1px solid #ddd
  border-radius 4px
  box-shadow 0px 2px 4px 0px rgba(0, 0, 0, .12), 0px 0px 6px 0px rgba(0, 0, 0, .04)
  &:before
    content ""
    position absolute
    border-style solid
    top -6px
    left 276px
    border-width 0px 6px 6px 6px
    border-color #ddd transparent
  &:after
    content ""
    position absolute
    border-style solid
    top -4px
    left 278px
    border-width 0px 4px 4px 4px
    border-color  #fff transparent
  .btnWrap
    text-align center
    margin-top 20px
  .itemTitle
    display inline-block
    margin auto
    margin-right 14px
    text-align left
    .el-select,.el-input
      width 140px
</style>
